import React from 'react'
import { NavBar, Button } from 'antd-mobile'
import { useLocation, useNavigate } from 'react-router-dom'
import './index.css'

function RegistrationDetail() {
  const navigate = useNavigate()
  const location = useLocation() as any
  const data = location.state || {}

  const patientName = data.patientName || '王小柠'
  const registerNo = data.registerNo || '2015******10'
  const doctorName = data.doctorName || '刘医生'
  const jobTitle = data.jobTitle || '主任医师'
  const hospital = data.hospital || '四川省保健院南苑'
  const department = data.department || '门诊外一科'
  const fee = typeof data.fee === 'number' ? data.fee : 66
  const date = data.date || '2020-01-27'
  const timeRange = data.timeRange || '08:30-12:00(上午)'
  const room = data.room || '门诊一部五层C区203诊室'

  return (
    <div className="reg-container">
      <NavBar onBack={() => navigate(-1)}>挂号详情</NavBar>

      <div className="status-bar">
        <div className="dot">✔</div>
        <div className="status-text">挂号成功</div>
      </div>

      <div className="kv">
        <div className="k">就诊人</div>
        <div className="v">{patientName}</div>
      </div>
      <div className="kv">
        <div className="k">登记号</div>
        <div className="v">{registerNo}</div>
      </div>
      <div className="kv">
        <div className="k">挂号医生</div>
        <div className="v">
          <span className="avatar">👨‍⚕️</span>
          <span>{doctorName}（{jobTitle}）</span>
        </div>
      </div>
      <div className="kv">
        <div className="k">就诊医院</div>
        <div className="v">{hospital}</div>
      </div>
      <div className="kv">
        <div className="k">挂号科室</div>
        <div className="v">{department}</div>
      </div>
      <div className="kv">
        <div className="k">挂号费用</div>
        <div className="v fee">¥ {fee.toFixed(2)}</div>
      </div>
      <div className="kv">
        <div className="k">预约时间</div>
        <div className="v">{date}　{timeRange}</div>
      </div>
      <div className="kv">
        <div className="k">科室地址</div>
        <div className="v">{room}</div>
      </div>

      <div className="bottom">
        <Button block onClick={() => navigate('/app')}>取消挂号</Button>
      </div>
    </div>
  )
}

export default RegistrationDetail




